import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon, Menu } from 'antd';

const { SubMenu } = Menu;

class LeftMenus extends Component {

  constructor(props) {
    super(props);
    this.state = {
      rootSubmenuKeys: [],
      openKeys: [],
    };
    this.menuNodes = this.getMenuNodes(this.props.menuList);
  }

  componentDidMount() {
    const data = this.props.menuList;
    for (let i = 0; i < data.length; i++) {
      if (data[i].children) {
        for (let j = 0; j < data[i].children.length; j++) {
          const liData = data[i].children[j];
          if (liData.children) {
            this.state.rootSubmenuKeys.push(liData.key + '#');
            for(let k = 0; k < liData.children.length; k++) {
              if(liData.children[k].key == this.props.selectedKey) {
                this.setState({
                  openKeys: [data[i].key, liData.key+'#'],
                });
              }
            }
          } else {
            if(liData.key == this.props.selectedKey) {
              this.setState({
                openKeys: [data[i].key],
              });
            }
          }
        }
        this.state.rootSubmenuKeys.push(data[i].key + '');
      }
    }
  }

  onOpenChange = (openKeys) => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    let openList;
    if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      if (latestOpenKey && latestOpenKey.length === 5) {
        openList = this.state.openKeys.filter((e) => {
          return e.length !== 5;
        });
        this.setState({
          openKeys: openList,
        });
      } else {
        this.setState({
          openKeys: openKeys,
        });
      }

    } else {
      if (latestOpenKey && latestOpenKey.length === 5) {
        openList = this.state.openKeys.filter((e) => {
          return e.length !== 5;
        });
        openList.push(latestOpenKey);
        this.setState({
          openKeys: openList,
        });
      } else {
        this.setState({
          openKeys: latestOpenKey ? [latestOpenKey] : [],
        });
      }
    }
  }

  getMenuNodes = (menuList) => {
    // 三级菜单
    const html = [];
    for (let i = 0; i < menuList.length; i++) {
      if (menuList[i].children) {
        const li = [];
        for (let j = 0; j < menuList[i].children.length; j++) {
          const liData = menuList[i].children[j];
          if (liData.children) {
            const oli = [];
            for (let k = 0; k < liData.children.length; k++) {
              oli.push(
                <Menu.Item key={liData.children[k].key}
                           onClick={() => this.props.menuClickCallback(liData.children[k])}>
                  <Icon type={liData.children[k].nIcon}/>
                  <span className='title' title={liData.children[k].title}>{liData.children[k].title}</span>
                </Menu.Item>
              );
            }
            const oul = <SubMenu key={liData.key+'#'}
                                 title={
                                   <span>
                                    <Icon type={liData.nIcon}/>
                                    <span className='title' title={liData.title}>{liData.title}</span>
                                   </span>
                                 }
                        >
                          {oli}
                        </SubMenu>;
            li.push(oul);
          } else {
            li.push(
              <Menu.Item key={liData.key} onClick={() => this.props.menuClickCallback(liData)}>
                <Icon type={liData.nIcon}/>
                <span className='title' title={liData.title}>{liData.title}</span>
              </Menu.Item>
            );
          }
        }
        const ul = <SubMenu key={menuList[i].key}
                            title={
                              <span>
                                <Icon type={menuList[i].nIcon}/>
                                <span className='title' title={menuList[i].title}>{menuList[i].title}</span>
                              </span>
                            }
                    >
                      {li}
                    </SubMenu>;
        html.push(ul);
      } else {
        html.push(
          <Menu.Item key={menuList[i].key} onClick={() => this.props.menuClickCallback(menuList[i])}>
            <Icon type={menuList[i].nIcon}/>
            <span className='title' title={menuList[i].title}>{menuList[i].title}</span>
          </Menu.Item>
        );
      }
    }
    return html;
  }

  render() {
    // console.log("render()", this.state.openKeys);
    const { selectedKey } = this.props;
    return (
      <Menu
        openKeys={this.state.openKeys}
        onOpenChange={this.onOpenChange}
        mode="inline"
        theme="dark"
        selectedKeys={[selectedKey]}
        style={{width: '100%'}}
      >
        {this.menuNodes}
      </Menu>
    );
  }
}

LeftMenus.propTypes = {
  menuList: PropTypes.object.isRequired,
  menuClickCallback: PropTypes.func.isRequired,
  selectedKey: PropTypes.string,
};

export default LeftMenus;
